<template>
  <page-header-wrapper>
    <a-card class="auto-reply-card">
      <gz-official-account-list v-model:value="vdata.officialAccount">
        <div>
          <a-tabs v-model:activeKey="vdata.type" @change="searchFunc">
            <a-tab-pane v-for="item in materialType" :key="item.key">
              <template #tab>
                <span>
                  <component :is="item.icon" />
                  {{ item.value }}
                </span>
              </template>
            </a-tab-pane>
          </a-tabs>
          <a-skeleton v-if="!vdata.officialAccount" :rows="6" />
          <GzTable
            v-else
            ref="infoTableRef"
            :init-data="true"
            :req-table-data-func="reqTableDataFunc"
            :pageSize="10"
            :pageSizeOptions="['5','10','15','20']"
            :table-columns="tableColumns"
            :search-data="searchData"
            row-key="agentNo"
            :scrollX="800"
          >
            <template #topBtnSlot>
              <a-button v-if="$access('ENT_MP_MATERIAL_ADD')" type="primary" @click="addOrEditFunc(false)">
                <plus-outlined />新建
              </a-button>
            </template>
            <template #bodyCell="{ column, record, index }">
              <template v-if="column.key === 'url'">
                <template v-if="record.url">
                  <img class="ant-image-img" :src="record.url" referrerpolicy="no-referrer" @click="previewFileFunc(record.url)">
                </template>
                <template v-else>
                  <img src="@/assets/svg/default-img.svg" alt="">
                </template>
              </template>
              <template v-if="column.key === 'operation'">
                <!-- 操作列插槽 -->
                <GzTableColumns>
                  <a-button v-if="$access('ENT_MP_MATERIAL_IMPT')" type="link" @click="impFunc(record)">导入活动素材库</a-button>
                  <a-button v-if="$access('ENT_MP_MATERIAL_DEL')" type="link" danger @click="delFunc(record.mediaId)">删除</a-button>
                </GzTableColumns>
              </template>
            </template>
          </GzTable>
        </div>
      </gz-official-account-list>
    </a-card>
    <AddOrEdit ref="addOrEditRef" :callbackFunc="searchFunc" />
    <a-modal v-model:visible="vdata.visible" width="30%" title="请输入模板编号" @cancel="vdata.visible = false" @ok="confirmSubmit">
      <a-form-item class="table-search-item" label="活动模板编号">  
        <a-input v-model:value="vdata.activityTemplateNo" label="活动模板编号" :placeholder="'请输入模板编号'" />
      </a-form-item>
    </a-modal>
  </page-header-wrapper>
</template>

<script setup lang="ts">
import { nextTick, reactive, ref, watch, getCurrentInstance, } from 'vue'
import {$apiOfficialReplyGetMaterialList,$apiImageTextList,$apiOfficialMediaDeleteMaterial,$apiOfficialMediaImportMaterialImg} from '@/api/proxy/officialManage/materialManage/index'
import AddOrEdit from './AddOrEdit.vue'
import storage from 'store'
const { $access, $infoBox, $viewerApi } = getCurrentInstance()!.appContext.config.globalProperties

const addOrEditRef = ref()

const searchData = ref({})
const infoTableRef = ref()

// 数据源
const vdata = reactive({
  type: 'image', // 回复类型
  officialAccount: null, // 当前选中的公众号
  visible:false,
  activityTemplateNo:'',
  mediaId:'',
  url:''
} as any)

// 素材类型
const materialType = [
  { key: 'image', value: '图片', icon: 'file-image-outlined' },
  // { key: 'voice', value: '语音', icon: 'phone-outlined' },
  // { key: 'video', value: '视频', icon: 'play-square-outlined' },
  // { key: 'thumb', value: '缩略图', icon: 'picture-outlined' },
  // { key: 'news', value: '图文', icon: 'file-image-outlined' },
]

// 表格列
let tableColumns = reactive([
  { key: 'mediaId', title: '素材编号', dataIndex: 'mediaId' },
  { key: 'name', title: '素材名称', dataIndex: 'name'  },
  { key: 'url', title: '素材图片', dataIndex: 'url' },
  { key: 'operation', title: '操作',  fixed: 'right', align: 'center' }
])
/**
 * 列表搜索
 */
function searchFunc() {
  infoTableRef.value.refTable(true)
}
/**
 * 请求table接口数据
 * @param params  查询条件
 */
function reqTableDataFunc(params: any) {
  console.log(params,'params55555')
  if(vdata.type === 'news'){
 return $apiImageTextList({ appid: vdata.officialAccount.appId,  offset: 0, count: 10,...params }).then(res => {
        return { ...res, total: res.totalCount, records: res.items }
    })
  }else{
 return $apiOfficialReplyGetMaterialList({ appid: vdata.officialAccount.appId, type: vdata.type,...params }).then(res => {
        return { ...res, total: res.totalCount, records: res.items }
    })
  }
}
/**
 * 监听公众号变化
 */
watch(() => vdata.officialAccount, (newVal, oldVal) => {
  if(!oldVal) return
  infoTableRef.value.refTable(true)
})


// 导入
const impFunc = (record) =>{
  vdata.mediaId = record.mediaId
  vdata.activityTemplateNo = ''
  vdata.url = record.url
  vdata.visible = true

  // console.log(record,'导入')
  // $apiOfficialMediaImportMaterialImg({}).then(res=>{

  // })
}

// 确认
const confirmSubmit = () =>{
  console.log(1111)
  $apiOfficialMediaImportMaterialImg({officialAppId:vdata.officialAccount.appId,mediaId:vdata.mediaId,activityTemplateNo:vdata.activityTemplateNo,url:vdata.url}).then(res=>{
    console.log(res,555555)
    // if(res.code ==0){
      $infoBox.message.success(res)
    // }
  })
  vdata.visible = false
}

/**
 * 新增
 */
function addOrEditFunc(mediaId){
  addOrEditRef.value.show(vdata.type, vdata.officialAccount.appId, mediaId)
}
/**
 * 删除
 */
function delFunc(mediaId){
  $infoBox.confirmDanger('确认删除？', '请确认是否删除当前素材？', () => {
    $apiOfficialMediaDeleteMaterial({ mediaId, appid: vdata.officialAccount.appId }).then(res => {
      $infoBox.message.success('删除成功')
      infoTableRef.value.refTable()
    })
  })
}
// 预览图片
function previewFileFunc(src){
  if(src){
    $viewerApi({images: [src]})
  }
}

</script>

<style scoped>
  .auto-reply-card{
    .inner{
      padding: 24px;
    }
  }


  /* 样式穿透 */
  .ant-image-img{
    width: 80px;
    height: 80px;
    object-fit: cover;
  }
</style>